<template>
  <div>
    <!-- 获取焦点 DOM元素 .focus() -->
    <button @click="comName = 'UserAccount'">显示UserAccount</button>
    <button @click="comName = 'UserInfo'" >显示UserInfo</button>
    <component :is="comName" />
    <!-- 使用component 标签来解决这个问题  -->
    <!-- is 指定组件名，会将对应组件名的组件渲染到此处，修改comName 会动态切换对应的组件  -->
  </div>
</template>

<script>
import UserAccount from './components/UserAccount.vue'
import UserInfo  from './components/UserInfo.vue'
export default {
  components:{
    UserAccount,
    UserInfo
  },
    data(){
      return {
       comName:''
      }
    },
    methods:{
     
       
      },
   

   
    
    }

</script>

<style >

</style>